<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>京东首页右侧固定层</title>
		<link href="nav.css" rel="stylesheet">
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				$("#nav li span").mouseover(function() {
					var index = $("#nav li span").index(this);
					$("#nav li:eq(" + index + ") span~p").show();
					$("#nav li:eq(" + index + ") span").css({
						"background-color": " #c81623"
					});
				}).mouseout(function() {
					var index = $("#nav li span").index(this);
					$("#nav li:eq(" + index + ") span~p").hide();
					$("#nav li:eq(" + index + ") span").css({
						"background-color": " #7a6e6e"
					});
				})
			})
		</script>
	</head>

	<body>
		<nav id="nav">
			<li><span></span>
				<p>就东会员</p>
			</li>
			<li><span></span>
				<p>购物车</p>
			</li>
			<li><span></span>
				<p>我的关注</p>
			</li>
			<li><span></span>
				<p>我的足迹</p>
			</li>
			<li><span></span>
				<p>我的消息</p>
			</li>
			<li><span></span>
				<p>咨询JIMI</p>
			</li>
		</nav>
	</body>

</html>